<template>
  <div class="slide-view">
    <a-menu style="width: 256px">
      <a-menu-item v-for="v in menulist" :key="v.key" :class="slide - bg">
        <component :is="$antIcons[v.icon]" />
        {{ v.title }}
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script lang="ts" setup>
import { useThemeStore } from "@/store/useThemeStore"
const themeStore = useThemeStore()
const menulist = reactive([
  {
    title: "菜单一",
    key: "100",
    icon: "MailOutlined",
  },
  {
    title: "菜单二",
    key: "200",
    icon: "CalendarOutlined",
  },
  {
    title: "菜单三",
    key: "300",
    icon: "AppstoreOutlined",
  },
  {
    title: "菜单四",
    key: "400",
    icon: "SettingOutlined",
  },
])

console.log(themeStore.slideMenuConfig)
</script>

<style scoped lang="less">
.slide-view {
  :deep(.ant-menu) {
    //栏目背景色
    background-color: var(--slide-menu-bg);
    .ant-menu-item {
      // 字体和图标颜色
      .ant-menu-title-content {
        color: var(--slide-menu-font-icon-color);
      }
    }
    // 栏目被选中背景色
    .ant-menu-item-selected {
      background-color: var(--slide-menu-selected-bg);
      // 被选中字体和图标样式
      .ant-menu-title-content {
        color: var(--slide-menu-font-icon-selected-color);
      }
    }
  }
}
</style>
